<template>
    <view :style="{ '--color': color }">
        <status-bar title="详情"></status-bar>

        <view class="info">
            <text class="stateShow">{{ pageData.stateShow }}</text>
            <text class="stateDesc">{{ pageData.stateDesc }} {{ second }}</text>
            <view class="Code" v-if="pageData.state == 4">
                <text class="codeTxt">验收确认码</text>
                <text class="confirm_code" user-select>{{ pageData.confirm_code }}</text>
                <text class="confirmTip">{{ pageData.confirmTip }}</text>
            </view>

            <!-- 评价 -->
            <view class="comment" v-if="pageData.commentShow == 1">
                <u-rate count="5" v-model="pageData.star" size="32" inactiveColor="#cecece" activeColor="#FF3355"></u-rate>

                <textarea v-model="pageData.comment_word" :maxlength="300" class="comment_word" auto-height placeholder="评价内容" />
                <view class="commentBtn" @click="comment">提交评分</view>
            </view>

            <view class="comment" v-if="pageData.state == 7">
                <u-rate count="5" v-model="pageData.star" readonly size="32" inactiveColor="#cecece" activeColor="#FF3355"></u-rate>
                <textarea v-model="pageData.comment_word" disabled :maxlength="300" class="comment_word" auto-height placeholder="评价内容" />
                <view class="commentBtn" @click="toUrl(`afterSale?repair_id=${id}&goods_id=${pageData.goods_id}`)" v-if="pageData.after_order_id == 0">我要售后</view>
            </view>
        </view>

        <view class="serverBox" v-if="(pageData.payment > 0 && pageData.repair_type == 1) || pageData.repair_type == 3">
            <text class="color_66 size28">服务费用</text>
            <view class="Price">
                <text class="size28 m-top26 m-right4">￥</text>
                <text class="size64">{{ pageData.payment }}</text>
            </view>
            <text class="black size24 m-top20" v-if="pageData.sign_desc">{{ pageData.sign_desc }}</text>
            <view class="drawBox" v-if="pageData.sign_pic">
                <block v-for="(item, index) in pageData.sign_pic" :key="index">
                    <image :src="$imgUrls(item)" mode="aspectFill" @click="$common.previewImgs(index, pageData.sign_pic)" class="drawImg"></image>
                </block>
            </view>

            <view class="rows" v-if="flagCoupon">
                <Coupon :pageData="pageData" :coupon_id="coupon_id" @Use_couponId="Use_couponId"></Coupon>
            </view>

            <view class="playBtn" v-if="pageData.payShow == 1" @click="nowPlay">立即支付</view>
        </view>

        <view class="bom" v-if="pageData.master_info">
            <image :src="$imgUrls(pageData.master_info.master_head)" mode="aspectFill" class="headImg"></image>
            <view class="content">
                <text class="black size28 bold500 ellipsis">{{ pageData.master_info.master_name }}</text>
                <text class="color_66 size24 ellipsis">{{ pageData.master_info.introduce }}</text>
            </view>
            <view class="contact" @click="$common.Tel(pageData.master_info.master_tel)">联系TA</view>
        </view>

        <view class="bom" v-if="pageData.service_info">
            <image :src="$imgUrls(pageData.service_info.headImg)" mode="aspectFill" class="headImg"></image>
            <view class="content">
                <text class="black size28 bold500">点这里儿，加客服微信</text>
                <text class="color_66 size24">如有疑问请添加客服微信立即咨询</text>
            </view>
            <view class="contact" @click="show = true">联系客服</view>
        </view>

        <view class="Wrapper">
            <view class="applist">
                <text class="title">预约类型</text>
                <text class="content" user-select>{{ pageData.typeName }}</text>
            </view>
            <view class="applist">
                <text class="title">预约项目</text>
                <text class="content" user-select>{{ pageData.goods_name }}</text>
            </view>
            <view class="applist">
                <text class="title">预约时间</text>
                <text class="content" user-select>{{ pageData.service_time }}</text>
            </view>
            <view class="applist">
                <text class="title">联系人</text>
                <text class="content" user-select>{{ pageData.name }}</text>
            </view>
            <view class="applist">
                <text class="title">联系电话</text>
                <text class="content" user-select>{{ pageData.tel }}</text>
            </view>
            <view class="applist">
                <text class="title">服务地址</text>
                <text class="content" user-select>{{ pageData.address }}</text>
            </view>
            <view class="applist">
                <text class="title">备注信息</text>
                <text class="content" user-select>{{ pageData.remark }}</text>
            </view>
            <view class="drawing">
                <text class="color_33 size28">现场图</text>
                <view class="drawBox">
                    <block v-for="(item, index) in pageData.attachment" :key="index">
                        <image :src="$imgUrls(item)" mode="aspectFill" @click="$common.previewImgs(index, pageData.attachment)" class="drawImg"></image>
                    </block>
                </view>
            </view>
        </view>

        <u-popup :show="show" @close="show = false" :round="10" closeable>
            <view class="upopup">
                <text class="black size32 bold500">添加客服</text>
                <image :src="$imgUrls(pageData.service_info.wechat)" v-if="pageData.service_info && pageData.service_info.wechat" show-menu-by-longpress mode="aspectFill" class="wechat"></image>
            </view>
        </u-popup>
    </view>
</template>

<!-- repair_type  0未定义 1正常单 2 月结单  3定额单 4返修单-->
<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    import Coupon from '@/zunyi/components/Coupon.vue';
    export default {
        components: {
            Coupon
        },
        data() {
            return {
                time: null,
                readonly: false,
                star: '',
                comment_word: '',
                show: false,
                id: '',
                pageData: '',
                coupon_id: ''
            };
        },
        onLoad(opt) {
            if (opt.id) this.id = opt.id;
        },
        onShow() {
            this.OrderDetail();
        },
        methods: {
            async OrderDetail() {
                let requestObj = {
                    repair_id: this.id,
                    coupon_id: this.coupon_id
                };
                const result = await Api.repairOrderDetail(requestObj);
                this.pageData = result;
            },

            comment() {
                if (!this.pageData.star) return this.$Toast('未评价分数');
                this.$http
                    .post({
                        url: '/orderRepairApi/comment',
                        data: {
                            star: this.pageData.star,
                            comment_word: this.pageData.comment_word,
                            repair_id: this.id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.$Toast(res.msg);
                        Api.repairOrderDetail(this.id).then((result) => {
                            this.pageData = result;
                        });
                    });
            },

            nowPlay() {
                this.$showLoading('');
                this.$http
                    .get({
                        url: '/accountPay/getRepairOrderPay',
                        data: {
                            repair_id: this.id,
                            payType: 1,
                            coupon_id: this.coupon_id
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 100) return this.$Toast(res.msg);
                        const Result = res.data;
                        this.$Payment(Result);
                    });
            },
            formatSeconds(seconds) {
                console.log('1');
                // 计算天数、小时、分钟和秒
                const days = Math.floor(seconds / (24 * 60 * 60)); // 总秒数除以一天的秒数
                const remainingSecondsAfterDays = seconds % (24 * 60 * 60); // 剩余的秒数
                const hours = Math.floor(remainingSecondsAfterDays / (60 * 60)); // 剩余秒数除以一小时的秒数
                const remainingSecondsAfterHours = remainingSecondsAfterDays % (60 * 60); // 剩余的秒数
                const minutes = Math.floor(remainingSecondsAfterHours / 60); // 剩余秒数除以一分钟的秒数
                const remainingSeconds = remainingSecondsAfterHours % 60; // 最终剩余的秒数

                // 格式化时间
                const formattedTime = [
                    hours.toString().padStart(2, '0'), // 小时
                    minutes.toString().padStart(2, '0'), // 分钟
                    remainingSeconds.toString().padStart(2, '0') // 秒
                ].join(':');
                console.log(days, 'days');
                // 如果有天数，则加上天数
                if (days > 0) {
                    return `${days}天${formattedTime}`;
                }

                // 否则只返回小时、分钟和秒
                return formattedTime;
            },

            Use_couponId(event) {
                if (!event) return;
                this.coupon_id = event;
                this.OrderDetail();
            }
        },
        computed: {
            ...mapState(['color']),
            second() {
                if (!this.pageData || this.pageData.state != 4) return '';
                this.time = setTimeout(() => {
                    this.pageData.start_second++;
                }, 1000);

                return this.formatSeconds(this.pageData.start_second);
            },
            flagCoupon() {
                if (!this.pageData) return false;
                if (this.pageData.coupon_id || this.pageData.state <= 6) {
                    return true;
                } else {
                    return false;
                }
            }
        },
        beforeDestroy() {
            clearTimeout(this.timer);
            // clearInterval(this.timer);
        },
        onHide() {
            clearTimeout(this.timer);
        },
        onUnload() {
            clearTimeout(this.timer);
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $bgF8;
        padding-bottom: 40rpx;
        // padding-bottom: calc(env(safe-area-inset-bottom) + 160rpx);
    }
</style>
<style lang="scss" scoped>
    .info {
        width: 700rpx;
        background-color: #fff;
        margin: 24rpx auto 0;
        padding: 24rpx;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .stateShow {
            color: #000;
            font-size: 36rpx;
            font-weight: 500;
            margin-top: 20rpx;
        }
        .stateDesc {
            color: #ff3355;
            font-size: 24rpx;
            margin-top: 20rpx;
        }
        .Code {
            width: 100%;
            padding: 30rpx;
            background-color: #ebf8ff;
            border-radius: 30rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20rpx;
            .codeTxt {
                color: #67a9c9;
                font-size: 28rpx;
            }
            .confirm_code {
                color: #28adf2;
                font-size: 64rpx;
            }
            .confirmTip {
                color: #67a9c9;
                font-size: 24rpx;
            }
        }
        .comment {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            margin-top: 30rpx;
            .comment_word {
                width: 100%;
                min-height: 200rpx;
                border: 1px solid #eaeaea;
                border-radius: 10rpx;
                padding: 20rpx;
                font-size: 28rpx;
                margin-top: 24rpx;
            }
            .commentBtn {
                width: 260rpx;
                height: 80rpx;
                background-color: var(--color);
                color: #fff;
                font-size: 28rpx;
                border-radius: 40rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 24rpx;
            }
        }
    }

    .serverBox {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx 24rpx 40rpx 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .Price {
            display: flex;
            align-items: center;
            color: #ff3355;
            margin-top: 10rpx;
        }
        .playBtn {
            width: 260rpx;
            height: 80rpx;
            background-color: var(--color);
            color: #fff;
            font-size: 28rpx;
            border-radius: 40rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 40rpx;
        }
    }

    .bom {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx;
        display: flex;
        align-items: center;
        .headImg {
            width: 96rpx;
            height: 96rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 96rpx;
            margin-right: 10rpx;
        }
        .contact {
            background-color: var(--color);
            color: #fff;
            font-size: 24rpx;
            width: 146rpx;
            height: 60rpx;
            border-radius: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .Wrapper {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx;
        .applist {
            width: 100%;
            display: flex;
            margin-bottom: 40rpx;
            .title {
                width: 140rpx;
                color: #333;
                font-size: 28rpx;
                margin-right: 20rpx;
                flex-shrink: 0;
            }
            .content {
                color: #333;
                font-size: 28rpx;
            }
        }
        .drawing {
            width: 100%;
            display: flex;
            flex-direction: column;
        }
    }

    .upopup {
        width: 100%;
        padding: 50rpx 30rpx 30rpx 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .wechat {
            width: 360rpx;
            height: 360rpx;
            margin-top: 30rpx;
        }
    }
    .drawBox {
        width: 100%;
        margin-top: 20rpx;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10rpx;
        .drawImg {
            width: 200rpx;
            height: 200rpx;
            border-radius: 12rpx;
            border: 1px solid #eaeaea;
        }
    }
</style>
